<template>
  <div id="navBox">
    <div class="nav_left">
      <!-- 声明式导航 -->
      <!-- <router-link to="/" tag="div">导航栏</router-link> -->
      <a href="javascript:void(0)" @click="handleClick">
        <Icon type="ios-list-box-outline" />导航栏
      </a>
    </div>
    <div class="nav_right">

      <!--  -->
      <!-- <Dropdown @on-click="myInfo">
        <a href="javascript:void(0)">
          hover 触发<Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem name='首页'>驴打滚</DropdownItem>
          <DropdownItem name='课程学习'>炸酱面</DropdownItem>
          <DropdownItem>豆汁儿</DropdownItem>
          <DropdownItem>冰糖葫芦</DropdownItem>
          <DropdownItem>北京烤鸭</DropdownItem>
        </DropdownMenu>
      </Dropdown> -->

      <!-- router-link 点击跳转 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/learn">课程学习</router-link>
      <router-link to="/student">学员展示</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/activity">社区</router-link>
      
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBox',
  components:{},
  mounted() {
    // console.log(this.$router.options.routes)
  },
  methods: {
    handleClick() {
      // 编程式导航
      // console.log('router 实例', this.$router, );
      // push
      if( this.$route.path !== '/home' ){
        this.$router.push('/home').catch(err => {
          console.log(err);
        })
      }else{
        // console.error('冗余导航，重复点击导航')
      }
      
      // replace
      // this.$router.replace('/')

      // go 0会刷新一下
      // this.$router.go(-1)

      // console.log('路由信息', this.$route );

    },
    // 点击返回name的值
    myInfo(name){
      console.log('点击返回name的值', name)
    }


  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#navBox{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #3385ff;
}
#navBox a {
  color: #fff;
  margin: 0 10px;
}
/* 
  router-link-exact-active 当前展示的路径完全匹配组件to属性的值
  router-link-active 当前路径包含to属性的值
*/
/* #navBox a.router-link-exact-active {
  color: #fff;
  margin: 0 10px;
  font-weight: bold;
} */
#navBox a.router-link-active {
  color: #fff;
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
}






</style>
